<template>
  <div class="info">
    <!-- 背景图 -->
    <div class="head">
      <div class="back" @click="back">＜</div>
      <!-- <van-nav-bar  left-arrow @click-left="back" /> -->
      <!-- <span></span> -->
    </div>
    <!-- 头像 -->
    <div ref="scrl" class="scrl">
      <div class="content">
        <div class="girl">
          <img src="@/assets/images/user/user-girl.png" alt />
          <div class="name textgexing">
            <span>{{names}}</span>
            <span class="lev">
              <img src="@/assets/images/user/user-lev.png" alt />
              <span>LV1</span>
            </span>
          </div>
          <p class="textgexing">同学有点懒,还没有写签名</p>
          <div class="bot">
            <div class="want">
              <span>想看</span>
              <span>12</span>
            </div>
            <div class="look">
              <span>看过</span>
              <span>8</span>
            </div>
          </div>
        </div>
        <!-- 看过的电影 -->
        <div class="see">
          <p class="movie">看过的电影</p>
          <ul>
            <li v-for="item in list" :key="item.title">
              <div class="imgs">
                <!-- <img v-for="ele in 5" :key="ele" :src="item.starImg" alt=""> -->
                <van-field name="rate">
                  <template #input>
                    <van-rate v-model="item.code" allow-half class="startall" size="small" />
                    <span class="textgood">{{item.code *2}}分，{{item.eval}}</span>
                  </template>
                </van-field>
              </div>
              <div class="top">
                <div class="contents">
                  <img :src="item.img" alt />
                  <div class="right">
                    <h3>{{item.title}}</h3>
                    <p>{{item.detail}}</p>
                    <p>{{item.contry}}</p>
                    <p>购票时间{{item.time}}</p>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "@better-scroll/core";
export default {
  data() {
    return {
      names: "",
      bScroll: ""
    };
  },
  computed: {
    list() {
      return this.$store.state.userList;
    }
  },
  created() {
    var obj = JSON.parse(localStorage.getItem("user"));
    this.names = obj.tel;
  },
  mounted() {
    let wrapper = this.$refs.scrl;
    this.bScroll = new BScroll(wrapper, {
      click: true
    });
  },
  methods: {
    back() {
      this.$router.push("/user");
    },
    refresh() {
      this.$nextTick(() => {
        this.bScroll.refresh();
      });
    }
  }
};
</script>
<style lang="scss" >
.van-cell__value--alone {
  margin-left: 0 !important;
}
</style>
<style scoped lang="scss">
.van-cell {
  width: 140px;
  background-color: transparent;
  border: hidden;
  padding: 0;
}
.info {
  overflow: hidden;
  height: 100%;
  background: rgba(35, 38, 45, 1);
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  .scrl {
    height: 600px;
    .content {
      margin-top: 20px;
      background-color: rgba(35, 38, 45, 1);
    }
  }
  .head {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 277px;
    background: linear-gradient(150deg, #f25b86 0%, #f1ac5e 100%);
    // background: url(~@/assets/images/user/user-bgc.png) no-repeat center;
    // background-size: 100% 100%;
    border-bottom-right-radius: 0.61333rem;
    border-bottom-left-radius: 0.61333rem;
    transform: translateY(-1px);

    .back {
      width: 100%;
      line-height: 50px;
      background: linear-gradient(150deg, #f25b86 20%, #f1ac5e 140%);
      position: fixed;
      text-align: left;
      text-indent: 1em;
      font-size: 22px;
      color: #ffffff;
      z-index: 19;
    }
  }
  .textgexing {
    margin-top: 10px;
  }
  .girl {
    position: relative;
    top: -180px;
    margin: 0 auto;
    width: calc(100% - 40px);
    height: 185px;
    background: rgba(51, 54, 61, 1);
    box-shadow: 0px 0px 4px 3px rgba(0, 0, 0, 0.1);
    border-radius: 17px;

    img {
      width: 72px;
      height: 72px;
      margin-top: -36px;
    }
    .name {
      color: white;
      span:nth-child(1) {
        margin: 8px;
        font-size: 18px;
      }
      .lev {
        display: inline-block;
        width: 50px;
        line-height: 22px;
        border-radius: 12px;
        border: 1px solid rgba(251, 195, 73, 1);
        img {
          width: 12px;
          height: 12px;
        }
      }
    }
    p {
      margin-bottom: 30px;
    }
    .bot {
      display: flex;
      justify-content: center;
      align-items: center;
      .want,
      .look {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 134px;
        height: 37px;
        border-radius: 6px;
        border: 1px solid;
        border-image: linear-gradient(
            139deg,
            rgba(242, 96, 132, 1),
            rgba(241, 159, 100, 1)
          )
          1 1;
        span {
          display: inline-block;
          width: 60px;
        }
      }
      .look {
        margin-left: 15px;
        border-image: linear-gradient(
            137deg,
            rgba(60, 76, 172, 1),
            rgba(198, 69, 151, 1)
          )
          1 1;
      }
    }
  }
  .textgood {
    display: inline-block;
    width: 60px;
    font-size: 12px;
    color: #f1ac5e;
    margin-left: 5px;
  }
  .see {
    height: 600px;
    position: relative;
    top: -150px;
    width: calc(100% - 40px);
    margin: 0 auto;
    .movie {
      font-size: 18px;
      color: #ffffff;
      text-align: left;
      margin: 5px 0;
    }
    ul {
      overflow: hidden;
    }
    li {
      width: 335px;
      .imgs {
        display: flex;
        align-items: center;
        text-align: left;
        margin: 10px 0 0;
        img {
          width: 11px;
          height: 10px;
          margin: 0 1px;
        }
      }
      .top {
        height: 140px;
        background: rgba(51, 54, 61, 1);
        box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.04);
        border-radius: 6px;
      }
      .contents {
        display: flex;
        height: 100%;
        img {
          width: 120px;
          height: 100%;
          margin-right: 20px;
        }
        .right {
          text-align: left;
          h3 {
            margin: 20px 0;
            font-size: 16px;
            color: #ffffff;
          }
          p {
            margin: 5px 0;
            font-size: 12px;
          }
        }
      }
    }
  }
}
.startall {
  text-align: left;
}
</style>
